<template>
  <div class="rtsp-test-container">
    <h1>RTSP视频流测试</h1>
    <!-- <video controls autoplay style="width: 200px;" src="http://192.168.110.139:8080/profile/upload/rtspPath/stream.m3u8"></video> -->
    <!-- <div class="test-section">
      <h3>测试1: 直接RTSP流</h3>
      <div class="video-wrapper">
        <VideoPlayer
          :src="hlsUrl"
          :width="640"
          :height="360"
          :autoplay="false"
          @ready="onVideoReady"
          @error="onVideoError"
        />
      </div>
    </div> -->
    
    <div class="test-section">
      <h3>测试2: 备用HLS流</h3>
      <div class="video-wrapper">
        <VideoPlayer
          :src="hlsUrl"
          :width="640"
          :height="360"
          :autoplay="false"
          @ready="onVideoReady"
          @error="onVideoError"
        />
      </div>
    </div>
    
    <!-- <div class="test-section">
      <h3>测试3: 本地测试视频</h3>
      <div class="video-wrapper">
        <video
          class="video-js vjs-default-skin"
          controls
          preload="auto"
          width="640"
          height="360"
          data-setup="{}"
        >
          <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
        </video>
      </div>
    </div> -->
    
    <div class="info-section">
      <h3>RTSP播放说明</h3>
      <div class="info-content">
        <p><strong>当前RTSP地址:</strong> {{ rtspUrl1 }}</p>
        <p><strong>转码HLS地址:</strong> {{ hlsUrl }}</p>
        <p><strong>状态:</strong> <span :class="statusClass">{{ statusText }}</span></p>
        
        <div class="debug-info">
          <h4>调试信息:</h4>
          <pre>{{ debugInfo }}</pre>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import VideoPlayer from '@/components/VideoPlayer.vue'

// 测试地址
const rtspUrl1 = ref('rtsp://223.113.67.182:554/openUrl/GANukmY')
const hlsUrl = ref('http://192.168.110.139:8080/profile/upload/rtspPath/stream_1757932677091/stream.m3u8')

// 状态管理
const status = ref('loading')
const debugInfo = ref('')

// 计算属性
const statusClass = computed(() => {
  switch (status.value) {
    case 'ready':
      return 'status-success'
    case 'error':
      return 'status-error'
    case 'loading':
      return 'status-loading'
    default:
      return ''
  }
})

const statusText = computed(() => {
  switch (status.value) {
    case 'ready':
      return '准备就绪'
    case 'error':
      return '加载失败'
    case 'loading':
      return '加载中...'
    default:
      return '未知状态'
  }
})

// 事件处理
const onVideoReady = (player) => {
  console.log('视频播放器就绪:', player)
  status.value = 'ready'
  debugInfo.value = JSON.stringify({
    event: 'ready',
    player: 'Video.js player initialized',
    timestamp: new Date().toISOString()
  }, null, 2)
}

const onVideoError = (error) => {
  console.error('视频播放错误:', error)
  status.value = 'error'
  debugInfo.value = JSON.stringify({
    event: 'error',
    error: error.message || 'Unknown error',
    timestamp: new Date().toISOString()
  }, null, 2)
}
</script>

<style scoped>
.rtsp-test-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.video-wrapper {
  margin: 20px 0;
  text-align: center;
}

.info-section {
  margin-top: 40px;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

.info-content {
  font-size: 14px;
  line-height: 1.6;
}

.debug-info {
  margin-top: 20px;
  padding: 15px;
  background: #000;
  color: #0f0;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  overflow-x: auto;
}

.status-success {
  color: #52c41a;
  font-weight: bold;
}

.status-error {
  color: #ff4d4f;
  font-weight: bold;
}

.status-loading {
  color: #faad14;
  font-weight: bold;
}

h1, h3, h4 {
  color: #333;
}

pre {
  margin: 0;
  white-space: pre-wrap;
}
</style>